Respect theme enforceNavigationBarContrast attribute#56413
Respect theme enforceNavigationBarContrast attribute#56413zoontek wants to merge 4 commits intofacebook:mainfrom
enforceNavigationBarContrast attribute#56413Conversation
meta-cla
bot
added
the
CLA Signed
zoontek
changed the title
WindowCompat.enableEdgeToEdge() and respect theme enforceNavigationBarContrast attribute
facebook-github-tools
bot
added
the
Shared with Meta
|
@alanleedev has imported this pull request. If you are a Meta employee, you can view this in D100384656. |
zoontek
changed the title
WindowCompat.enableEdgeToEdge() and respect theme enforceNavigationBarContrast attributeenforceNavigationBarContrast attribute
zoontek
force-pushed
the
respect-system-bars-styles
branch
from
d78aed6 to
0ef7a32
Compare
| if (enforceNavigationBarContrast) { | ||
| insetsController.isAppearanceLightNavigationBars = !isDarkMode | ||
| } |
There was a problem hiding this comment.
With the new if conditional apps with android:enforceNavigationBarContrast="false" in a light theme will now get light icons on a light background (invisible). It was unconditionally set previously.
It wasn't clear if this was tested; enforceNavigationBarContrast="false" + light theme → nav button icons are still dark/visible
There was a problem hiding this comment.
@alanleedev That's the expected behavior. When android:enforceNavigationBarContrast is set to false, React Native should not update the navigation bar theme and should instead stick to the default (light, similar to the status bar). If we update the default based on the device theme when the user explicitly requests control over the navigation bar button color, it would no longer match the current StatusBar behavior (or the default value in its props stack - which is light in StatusBarModule).
The goal is to rely on external libraries to change the navigation bar theme (such as expo-navigation-bar), since a NavigationBar component is unlikely to ever land in React Native core:
export const App = () => (
<>
<StatusBar style="auto" />
<NavigationBar style="auto" />
</>
);There was a problem hiding this comment.
It wasn't clear if this was tested; enforceNavigationBarContrast="false" + light theme → nav button icons are still dark/visible
Don't forget to set enforceNavigationBarContrast in both packages/rn-tester/android/app/src/main/res/values/styles.xml and packages/rn-tester/android/app/src/main/res/values-night/styles.xml to test in both light and dark mode, as those 2 files exist - even if values-night/styles.xml could be deleted, as it has the same content.
|
would be great if there are some screenshots |
|
@alanleedev Here is some screenshots, all of them has been made with the return (
<RNTesterThemeContext.Provider value={theme}>
{/* {Platform.OS === 'android' ? (
<StatusBar
barStyle="dark-content"
backgroundColor={theme.GroupedBackgroundColor}
/>
) : null} */}
{/* … */}Android 7 (
|
|
@alanleedev merged this pull request in dfddcc9. |
|
This pull request was successfully merged by @zoontek in dfddcc9 When will my fix make it into a release? | How to file a pick request? |
4 participants
Summary:
This PR adds respect of the theme's
enforceNavigationBarContrastattribute inWindowUtilenableEdgeToEdge(this will allow us to delete our EdgeToEdgePackage.kt file, and prevent a glitch where the navigation bar is semi-opaque for a short instant when user explicitly setandroid:enforceNavigationBarContrasttofalse).Changelog:
[ANDROID] [CHANGED] - Respect theme
enforceNavigationBarContrastattributeTest Plan:
android:enforceNavigationBarContrasttotrue(default) andfalse).